import React, { useState, useRef } from 'react';
import './styles.css';

interface PromptInputProps {
  onSubmit: (prompt: string) => void;
  onOpenForm?: () => void;
}

// 简化模板结构
interface TemplateItem {
  id: number;
  text: string;
}

const PromptInput: React.FC<PromptInputProps> = ({ onSubmit, onOpenForm }) => {
  const [inputValue, setInputValue] = useState('');
  const [templates, setTemplates] = useState<TemplateItem[]>([]);
  const nextTemplateId = useRef(1);

  // 将模板追加到输入框
  const handleTemplateClick = (templateText: string) => {
    const newTemplate = {
      id: nextTemplateId.current++,
      text: templateText
    };
    
    // 如果当前输入框有非模板内容，将其作为一个新模板
    if (inputValue && !templates.map(t => t.text).join('').includes(inputValue)) {
      const currentInputTemplate = {
        id: nextTemplateId.current++,
        text: inputValue
      };
      setTemplates([...templates, currentInputTemplate, newTemplate]);
      updateInputDisplay([...templates, currentInputTemplate, newTemplate]);
    } else {
      setTemplates([...templates, newTemplate]);
      updateInputDisplay([...templates, newTemplate]);
    }
  };

  // 根据模板数组更新输入框显示
  const updateInputDisplay = (templateArray: TemplateItem[]) => {
    setInputValue(templateArray.map(t => t.text).join(''));
  };

  // 处理输入框变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    
    // 如果新值比当前拼接的模板值短，说明用户删除了内容
    if (newValue.length < inputValue.length) {
      // 检查是否需要删除最后一个模板
      const lastTemplate = templates[templates.length - 1];
      if (lastTemplate && !newValue.endsWith(lastTemplate.text)) {
        // 删除最后一个模板
        const newTemplates = templates.slice(0, -1);
        setTemplates(newTemplates);
        
        // 如果删除后还有剩余模板，更新显示
        if (newTemplates.length > 0) {
          updateInputDisplay(newTemplates);
        } else {
          // 如果没有模板了，允许用户输入任意内容
          setInputValue(newValue);
        }
        return;
      }
    }
    
    // 如果没有模板或用户在添加内容，直接更新输入值
    setInputValue(newValue);
  };

  // 提交处理
  const handleSubmit = () => {
    if (inputValue.trim()) {
      onSubmit(inputValue);
      setInputValue('');
      setTemplates([]);
    }
  };

  // 处理键盘事件，支持退格键删除整个模板
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Backspace' && templates.length > 0) {
      const cursorPosition = e.currentTarget.selectionStart;
      const lastTemplate = templates[templates.length - 1];
      const lastTemplateStartPos = inputValue.length - lastTemplate.text.length;
      
      // 如果光标在最后一个模板的范围内，删除整个模板
      if (cursorPosition !== null && cursorPosition > lastTemplateStartPos) {
        e.preventDefault();
        const newTemplates = templates.slice(0, -1);
        setTemplates(newTemplates);
        updateInputDisplay(newTemplates);
      }
    }
  };

  return (
    <div className="prompt-input-container">
      <div className="template-buttons">
        <button 
          className="template-button" 
          onClick={() => handleTemplateClick("你好")}
        >
          你好
        </button>
        <button 
          className="template-button" 
          onClick={() => handleTemplateClick("哈喽")}
        >
          哈喽
        </button>
        {onOpenForm && (
          <button className="form-button" onClick={onOpenForm}>
            Open Form
          </button>
        )}
      </div>
      <div className="input-area">
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
          placeholder="请输入你的prompt..."
          className="prompt-input"
        />
        <button className="add-button" onClick={handleSubmit}>ADD</button>
      </div>
      <div className="help-text">
        <a href="#" className="help-link">how to use it?</a>
      </div>
    </div>
  );
};

export default PromptInput;